<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{meta.title}}</title>
    <link rel="stylesheet" href="{{base_url}}/static/vendor/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="{{base_url}}/static/vendor/@highlightjs/cdn-assets@11.10.0/styles/github.min.css" />

    <script src="{{base_url}}/static/vendor/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{base_url}}/static/vendor/@highlightjs/cdn-assets@11.10.0/highlight.min.js"></script>
    <script src="{{base_url}}/static/vendor/@highlightjs/cdn-assets@11.10.0/languages/php.min.js"></script>
    <script src="{{base_url}}/static/vendor/@highlightjs/cdn-assets@11.10.0/languages/javascript.min.js"></script>
    <script src="{{base_url}}/static/vendor/@highlightjs/cdn-assets@11.10.0/languages/java.min.js"></script>
    <script src="{{base_url}}/static/vendor/@highlightjs/cdn-assets@11.10.0/languages/bash.min.js"></script>
    <script src="{{base_url}}/static/vendor/@highlightjs/cdn-assets@11.10.0/languages/ini.min.js"></script>
    <script src="{{base_url}}/static/vendor/vue@3.5.12/dist/vue.global.prod.js"></script>
    <script src="{{base_url}}/static/vendor/axios@1.7.7/dist/axios.min.js"></script>
    <style>
        body {
            font-size: 14px;
            color: #333;
        }

        .text-333 {
            color: #333
        }

        a {
            text-decoration: none;
        }

        .content h2 {
            font-size: 1.25rem;
            margin: 1.5rem 0;
        }

        .content h3 {
            margin: 1.25rem 0
        }

        .content h3 {
            font-size: 1rem
        }

        .hightlight-keyword {
            color: orangered
        }

        .hljs {
            background-color: #f9f9f9;
        }

        .fs-7 {
            font-size: .9rem;
        }

        .fs-8 {
            font-size: .8rem;
        }

        .theme-dark,
        .theme-dark .hljs {
            background-color: rgba(0, 0, 0, .8);
            color: rgba(255, 255, 255, .8);
        }

        .theme-dark .card {
            background-color: transparent;
            color: rgba(255, 255, 255, .8);
            border: none;
        }

        .theme-dark .list-group-item,
        .theme-dark .pagination .page-link,
        .theme-dark .navbar .nav-link {
            color: rgba(255, 255, 255, .8);
            background: transparent;
        }

        .theme-dark .pagination .active .page-link {
            border-color: #efefef;
            color: var(--bs-link-color);
        }

        .theme-dark .list-group-item a,
        .theme-dark .navbar .nav-link a {
            color: rgba(255, 255, 255, .8);
        }

        img {
            max-width: 80%;
            max-height: 80%;
            margin: 1rem auto;
        }

        .list-group-item h5 a:hover {
            color: #0d6efd;
        }

        .category-info a::after {
            content: "/";
            margin: 0 5px;
        }

        .category-info a:last-child::after {
            content: "";
            margin: 0;
        }

        header {
            background: url("{{base_url}}/static/images/header.png");
        }

        footer a {
            color: #888
        }
    </style>
    {% block head %}{% endblock %}
</head>

<body>
    <div class="container">
        <header class="px-3 py-2 bg-light">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="fs-4">
                    <a class="text-white" href="#">{{meta.title}}</a>
                    <small class="d-block fs-8 my-2 text-white">{{meta.slogn}}</small>
                </h3>
                <div>
                    <div class="d-flex justify-content-end">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="isLightMode">
                            <label class="form-check-label">白天</label>
                        </div>
                    </div>
                    <form class="d-flex" role="search" action="{{base_url}}/search.html">
                        <div class="input-group input-group-sm">
                            <input name="s" class="form-control" type="search" placeholder="请输入关键词" aria-label="Search">
                            <button class="btn btn-secondary text-nowrap" type="submit">搜索</button>
                        </div>
                    </form>
                </div>
            </div>
        </header>
        <nav class="navbar navbar-expand-lg bg-body-tertiary mb-2 shadow" data-bs-theme="light">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="{{base_url}}/">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{base_url}}/about.html">关于</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{meta.repo}}" target="_blank">Gitee</a>
                        </li>
                    </ul>
                    <div>
                        <a class="fs-8 text-muted clock" href="https://www.baidu.com/s?wd=日历" target="_blank"
                            data-bs-title="---------- 第---天/--周" data-bs-placement="bottom">--:--:-- 星期--</a>
                    </div>
                </div>
            </div>
        </nav>
        <div class="row">
            <aside class="col-lg-2 col-md-12">
                <div class="card p-2 my-3 text-secondary fs-8 lh-md">
                    <div>昵称：{{meta.nickname}}</div>
                    <div class="my-2">简介：{{meta.intro}}</div>
                    <div>微信号：{{meta.wechat}}</div>
                    <div>Email：{{meta.email}}</div>
                </div>
                <ul class="list-unstyled lh-lg">
                    <li>
                        <a class="link-secondary" href="{{base_url}}/new.html" title="最新文章">最新文章</a>
                    </li>
                    <li>
                        <a class="link-secondary" href="{{base_url}}/recommand.html" title="推荐文章">推荐文章</a>
                    </li>
                    <li class="border-bottom my-2"></li>
                    {% for item in categories %}
                    <li>
                        <a class="link-secondary" href="{{base_url}}/{{item.name}}/index.html" title="{{item.text}}">
                            {{item.text}} ({{item.fileCount}})
                        </a>
                    </li>
                        {% for item2 in item.children %}
                        <li class="text-truncate">
                            <a class="link-secondary ms-4" href="{{base_url}}/{{item.name}}/{{item2.name}}/index.html"
                                title="{{item2.text}}">
                                {{item2.text}} ({{item2.fileCount}})
                            </a>
                        </li>
                        {% endfor %}
                    {% endfor %}
                </ul>
                <div class="d-flex flex-wrap fs-8 border-top mt-2 pt-3">
                    {% for item in tags %}
                    <div><a href="{{base_url}}/tag/{{item.title}}.html" target="_blank" class="text-secondary">{{item.title}}（{{item.count}}）</a></div>
                    {% endfor %}
                </div>
            </aside>
            <main class="col-lg-10 col-md-12">
                {% block main %}
                {% endblock %}
            </main>
        </div>
    </div>

    <footer class="bg-light pt-4 pb-2 mt-4">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <h5>Blog 简介</h5>
                    <p>内核版本号: <a href="{{ base_url }}/release.html" target="_blank">{{ version }}</a></p>
                    <section>
                        这是基于 Node 全栈技术和 Markdown 内容文件的博客系统，使用了以下 Node 插件：
                        <ul>
                            <li>express: 用于即时动态预览 Markdown 全站效果</li>
                            <li>nunjucks: 模板引擎，搭配 express 插件使用</li>
                            <li>chokidar: 监听文件变化，搭配 nunjucks 插件使用</li>
                            <li>showdown: 解析 markdown 文件到 html 格式</li>
                            <li>yaml: 解析 markdown 内容头部的 yaml 格式的元信息</li>
                            <li>http-server: 静态服务器，用于预览静态全站效果</li>
                        </ul>
                    </section>
                </div>
                <div class="col-3">
                    <h5>导航</h5>
                    <ul class="list-unstyled lh-lg">
                        <li><a href="{{base_url}}/index.html">首页</a></li>
                        <li><a href="{{base_url}}/about.html">关于</a></li>
                        <li><a href="{{meta.repo}}" target="_blank">Gitee</a></li>
                    </ul>
                </div>
                <div class="col-3">
                    <h5>友情链接</h5>
                    <ul class="list-unstyled lh-lg">
                        <li><a href="http://sochishun.gitee.io/navigation/" target="_blank">环球导航</a></li>
                        <li><a href="https://www.gushiwen.cn/" target="_blank">古诗文网</a></li>
                        <li><a href="https://www.liaoxuefeng.com/" target="_blank">廖雪峰的官方网站</a></li>
                        <li><a href="http://www.ruanyifeng.com/" target="_blank">阮一峰的个人网站</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    {% block foot %}
    <script>
        // BootStrap ToolTip 功能开关
        const toolTips = [...document.querySelectorAll('[data-bs-title]')].map(el => new bootstrap.Tooltip(el))
        // 侧边栏控制
        let visibleOfAside = true;
        function toggleAside() {
            visibleOfAside = !visibleOfAside;
            document.querySelector('aside').classList.toggle('d-none');
            document.querySelector('main').classList.toggle('col-lg-10');
        }
        function truncateText(text, length, ellipsis = '') {
            if (!text || text.length < length) {
                return text;
            }
            return text.substring(0, length) + ellipsis;
        }
        // 代码高亮
        // hljs.highlightAll();
        let sourceCodes = [];
        document.addEventListener('DOMContentLoaded', (event) => {
            document.querySelectorAll('pre code').forEach((el, i) => {
                sourceCodes.push(el.innerHTML);
                el.parentNode.id = i;
                hljs.highlightElement(el);

                let elCard = el.parentNode.parentNode;
                if (elCard.classList.contains('card')) {
                    elCard.innerHTML += `<div class="card-footer text-muted text-end">
    <button class="btn btn-sm btn-secondary me-2">复制</button>
    <button class="btn btn-sm btn-secondary">源码</button>
  </div>`;
                    let elCode = elCard.querySelector('.card-footer').previousElementSibling;
                    if (elCode) {
                        elCode.classList.add('d-none');
                    }
                    elCard.querySelector('.card-footer').addEventListener('click', function (evt) {
                        let elTarget = evt.target;
                        if (elTarget.nodeName == 'BUTTON') {
                            let elSource = elTarget.parentNode.previousElementSibling;
                            switch (elTarget.innerText) {
                                case '复制':
                                    navigator.clipboard.writeText(HtmlUtil.htmlDecode(sourceCodes[parseInt(elSource.id)]));
                                    break;
                                case '源码':
                                    elSource.classList.toggle('d-none');
                                    break;
                            }
                        }
                    })
                }
            });

        });
        // Html 代码复制功能
        var HtmlUtil = {
            /*1.用浏览器内部转换器实现html转码*/
            htmlEncode: function (html) {
                //1.首先动态创建一个容器标签元素，如DIV
                var temp = document.createElement("div");
                //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
                (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
                //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
                var output = temp.innerHTML;
                temp = null;
                return output;
            },
            /*2.用浏览器内部转换器实现html解码*/
            htmlDecode: function (text) {
                //1.首先动态创建一个容器标签元素，如DIV
                var temp = document.createElement("div");
                //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
                temp.innerHTML = text;
                //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
                var output = temp.innerText || temp.textContent;
                temp = null;
                return output;
            },
            /*3.用正则表达式实现html转码*/
            htmlEncodeByRegExp: function (str) {
                var s = "";
                if (str.length == 0) return "";
                s = str.replace(/&/g, "&amp;");
                s = s.replace(/</g, "&lt;");
                s = s.replace(/>/g, "&gt;");
                s = s.replace(/ /g, "&nbsp;");
                s = s.replace(/\'/g, "&#39;");
                s = s.replace(/\"/g, "&quot;");
                return s;
            },
            /*4.用正则表达式实现html解码*/
            htmlDecodeByRegExp: function (str) {
                var s = "";
                if (str.length == 0) return "";
                s = str.replace(/&amp;/g, "&");
                s = s.replace(/&lt;/g, "<");
                s = s.replace(/&gt;/g, ">");
                s = s.replace(/&nbsp;/g, " ");
                s = s.replace(/&#39;/g, "\'");
                s = s.replace(/&quot;/g, "\"");
                return s;
            }
        };

        /**
             * 获取一年中的第几天
             * @param {Number} year 
             * @param {Number} month 
             * @param {Number} date 
             * @returns 
             * @example console.log('一年第几天', getYearDays(2023, 1, 1));
             */
        function getYearDays(year, month, date) {
            let d = new Date(year, month - 1, date);
            let ms = d.getTime() - (new Date(year, 0, 0).getTime());
            return Math.ceil(ms / 1000 / 86400);
        }

        /**
         * 获取一年中的第几周
         * @param {Number} year 
         * @param {Number} month 
         * @param {Number} date 
         * @returns 
         * @example console.log('一年第几周', getYearWeeks(2018, 1, 8));
         */
        function getYearWeeks(year, month, date) {
            let endDate = new Date(year, month - 1, date);
            //本年的第一天
            let beginDate = new Date(year, 0, 1);
            //星期从0-6,0代表星期天，6代表星期六
            let endWeek = endDate.getDay();
            if (endWeek == 0) endWeek = 7;
            let beginWeek = beginDate.getDay();
            if (beginWeek == 0) beginWeek = 7;
            //计算两个日期的天数差
            let millisDiff = endDate.getTime() - beginDate.getTime();
            let dayDiff = Math.floor((millisDiff + (beginWeek - endWeek) * (24 * 60 * 60 * 1000)) / 86400000);
            return Math.ceil(dayDiff / 7) + 1;
        }

        // 时钟功能
        function initClock() {
            let elClock = document.querySelector('.clock'), oDate = null, dateInfo = null, i = 0;
            const tooltip = bootstrap.Tooltip.getInstance('.clock');
            if (elClock) {
                setInterval(() => {
                    // 时钟
                    oDate = new Date();
                    dateInfo = {
                        y: oDate.getFullYear(),
                        m: (oDate.getMonth() + 1).toString().padStart(2, '0'),
                        d: oDate.getDate().toString().padStart(2, '0'),
                        h: oDate.getHours().toString().padStart(2, '0'),
                        i: oDate.getMinutes().toString().padStart(2, '0'),
                        s: oDate.getSeconds().toString().padStart(2, '0'),
                        w: oDate.getDay(),
                        wText: ['日', '一', '二', '三', '四', '五', '六'][oDate.getDay()],
                        days: getYearDays(oDate.getFullYear(), oDate.getMonth() + 1, oDate.getDate()),
                        weeks: getYearWeeks(oDate.getFullYear(), oDate.getMonth() + 1, oDate.getDate()),
                    };
                    elClock.innerText = `${dateInfo.h}:${dateInfo.i}:${dateInfo.s} 星期${dateInfo.wText}`;
                    if (i == 0 || i % 20 == 0) {
                        tooltip.setContent({ '.tooltip-inner': `${dateInfo.y}-${dateInfo.m}-${dateInfo.d} ${dateInfo.days}天/${dateInfo.weeks}周` });
                        i = 1;
                    }
                    i++;
                }, 1000);
            }

        }

        // 切换皮肤
        function toggleTheme(elIsLightModeLabel, isNight = true) {
            if (isNight) {
                elIsLightModeLabel.innerText = '夜晚';
                window.localStorage.setItem('isLightMode', 0);
                document.body.classList.add('theme-dark');
                document.querySelectorAll('.navbar, header, footer').forEach(el => {
                    el.classList.remove('bg-light');
                    el.classList.add('bg-dark');
                })
            } else {
                elIsLightModeLabel.innerText = '白天';
                window.localStorage.setItem('isLightMode', 1);
                document.body.classList.remove('theme-dark');
                document.querySelectorAll('.navbar, header, footer').forEach(el => {
                    el.classList.remove('bg-dark');
                    el.classList.add('bg-light');
                })
            }
            document.querySelectorAll('.navbar').forEach(el => {
                el.dataset.bsTheme = isNight ? 'dark' : 'light';
            })
        }


        (() => {
            // 主题
            var elIsLightMode = document.querySelector('#isLightMode');
            var elIsLightModeLabel = elIsLightMode.nextElementSibling;
            if (window.localStorage.getItem('isLightMode') == '0') {
                elIsLightMode.checked = true;
                toggleTheme(elIsLightModeLabel, true)
            }
            elIsLightMode.addEventListener('change', function (evt) {
                if (evt.target.checked) {
                    toggleTheme(elIsLightModeLabel, true)
                } else {
                    toggleTheme(elIsLightModeLabel, false)
                }
            })
            // 时钟
            initClock();
        })()
    </script>
    {% endblock %}
</body>

</html>